<template>
  <view class="global-bg-wrap">
    <view class="header" v-if="showHeader">
      <!-- 状态栏 -->
      <view
        class="status-bar"
        :style="{ height: statusBarHeight + 'px' }"
      ></view>
      <!-- 标题栏 -->
      <view class="title-bar">
        <uni-icons
          v-if="showBack"
          type="left"
          size="28"
          color="#000000"
          @click="goBack"
          class="back-button"
        ></uni-icons>
        <view class="title">{{ title }}</view>
      </view>
    </view>
    <!-- 页面内容 -->
    <view class="content">
      <slot />
    </view>
    <view class="tabbar-content" v-if="showtabBar">
      <CustomTabbar ref="tabbarRef"></CustomTabbar>`
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { defineProps, onMounted } from 'vue';

const props = withDefaults(
  defineProps<{
    title?: string;
    showHeader?: boolean;
    showCollege?: boolean;
    showBack?: boolean;
    bannerText?: string;
    bannerImage?: string;
    bannerImageWidth?: string;
    bannerImageHeight?: string;
  }>(),
  {
    title: '',
    showHeader: true,
    showCollege: true,
    showBack: false,
    bannerText: '天津国土资源和房屋职业学院运营中心',
    bannerImage: 'image-1',
    bannerImageWidth: '277rpx',
    bannerImageHeight: '240rpx',
  }
);

const statusBarHeight = ref(0);
const tabBarHeight = ref<number>(0);

const getTabBarHeight = () => {
  try {
    const systemInfo = uni.getSystemInfoSync();
    console.log('systemInfo', systemInfo);
    statusBarHeight.value = Number(systemInfo.statusBarHeight);

    // 基础计算逻辑（适用于大多数平台）
    const safeAreaBottom =
      systemInfo.safeArea?.bottom || systemInfo.windowHeight;
    tabBarHeight.value = systemInfo.screenHeight - safeAreaBottom;
    // 平台差异处理
    // #ifdef MP-WEIXIN
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    tabBarHeight.value = systemInfo.windowHeight - menuButtonInfo.bottom;
    // #endif

    // iOS 安全区域适配
    // #ifdef H5 || APP
    if (systemInfo.platform === 'ios') {
      tabBarHeight.value =
        systemInfo.screenHeight - systemInfo.safeArea!.bottom + 4;
    }
    // #endif
  } catch (error) {
    console.error('获取 TabBar 高度失败:', error);
    // 默认高度（常见移动端设计规范值）
    tabBarHeight.value = 50;
  }
};

const goBack = () => {
  uni.navigateBack({
    delta: 1,
  });
};
const tabList = ref([
  {
    pagePath: '/pages/index/index',
    text: '首页',
    iconPath: '/static/images/tab-home.png',
    selectedIconPath: '/static/images/tab-home-active.png',
    badge: 0,
  },
  {
    pagePath: '/pages/tools/tools',
    text: '工具',
    iconPath: '/static/images/tab-alarm.png',
    selectedIconPath: '/static/images/tab-alarm-active.png',
    badge: 0,
  },
  {
    pagePath: '/pages/fault-report/index',
    iconPath: '/static/images/tabbar/jqr.png',
    selectedIconPath: '/static/images/tabbar/jqr.png',
    text: '新小智',
    badge: 0,
    MiddleButton: true,
  },
  {
    pagePath: '/pages/message/message',
    text: '消息中心',
    iconPath: '/static/images/tab-work.png',
    selectedIconPath: '/static/images/tab-work-active.png',
    badge: 0, // 示例角标
  },
  {
    pagePath: '/pages/profile/index',
    text: '个人',
    iconPath: '/static/images/tab-profile.png',
    selectedIconPath: '/static/images/tab-profile-active.png',
    badge: 0,
  },
]);
let showtabBar = ref(false);
onLoad(() => {
  getTabBarHeight();

  // 监听窗口变化（可选）
  uni.onWindowResize(() => {
    getTabBarHeight();
  });
  let currentRoute = getCurrentPages()[getCurrentPages().length - 1].route;
  let index = tabList.value.findIndex((item) => {
    return item.pagePath == `/${currentRoute}`;
  });
  if (index > -1) {
    showtabBar.value = true;
  } else {
    showtabBar.value = false;
  }
});
</script>

<style scoped lang="scss">
.global-bg-wrap {
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #f4f7ff;
  display: flex;
  flex-direction: column;
  background: #f6f9ff;

  .header {
    // height: 170rpx;
    background: #fff;
    // padding-top: 95rpx;
    box-sizing: border-box;

    .status-bar {
      height: 20rpx;
      background-size: cover;
      background-position: center;
    }

    .title-bar {
      display: flex;
      align-items: center;
      height: 75rpx;
      background-size: cover;
      background-position: center;
      color: #fff;

      .back-button {
        padding: 0 15rpx;
        font-size: 20rpx;
        cursor: pointer;
        position: absolute;
      }

      .title {
        flex: 1;
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 33rpx;
        color: #000000;
        line-height: 42rpx;
      }
    }
  }

  .content {
    flex: 1;
    overflow: auto;
  }

  .tabbar-content {
    height: 120rpx;
  }
}
</style>
